<template>
	<view class="luck-list" style="width: 679rpx;background: #00412d;">
		<view v-for="(item,index) in AwardList" :key="index">
			<view class="cell-item" :class="index==4||index===sel?'y-b':'w-b'" @tap="begin(index)">
				<view class="cell-content" :class="index==4||index===sel?'y':'w'">
					<image :src="item.image" mode="aspectFill" style="width: 120rpx; height: 120rpx;"
						v-if="item.image&&index!=4"></image>
					<image src="../../static/begin.png" mode="aspectFill" style="width: 120rpx; height: 120rpx;"
						v-if="index==4"></image>
					<view style="margin-top: 5rpx;" v-if="index!=4">
						<text style="font-size: 24rpx;font-weight: bold;">{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		props: {
			// 背景图
			nImg: String,
			// 列表
			AwardList: {
				type: Array,
				default: []
			},
			// 中奖索引
			sjNum: {
				type: Number,
				default: 0
			},
			isdrawing: Boolean,
			drawtype:Number
		},
		data() {
			return {
				sel: '',
				FastNums: 0,
				SlowNums: 0,
				time: 1000,
				LoopStatus: true,
				noClick: true,
				isauthorized: (uni.getStorageSync('token') ? true : false),
				userinfo: uni.getStorageSync('token'),
				timer:''
			}
		},
		onLoad() {
		},
		methods: {
			// 中奖后的逻辑
			updateMoney(money) {
				this.$emit('updateMoney', money)
			},
			begin(index){
				let that = this;
				if (that.timer) {
					clearTimeout(this.timer)
				}
				that.timer = setTimeout(() => {
					that.begin1(index)
				}, 500)
			},
			// 开始抽奖
			begin1(index) {
				let that = this;
				if (!that.noClick) {
					uni.showToast({
						title: '请勿频繁点击',
						icon: "none",
						position: 'bottom'
					});
					setTimeout(() => {
						that.noClick = true;
					}, 3000)
					return
				}
				that.noClick = false;
				if (!that.isdrawing) {
					uni.showToast({
						title: '没有抽奖次数',
						icon: "none",
						position: 'bottom'
					});
					that.noClick = true;
					return
				} else if (!that.isauthorized) {
					that.noClick = true;
					uni.showModal({
						title: '未登录',
						content: '是否去登录，加入活动',
						success(res) {
							if (res.confirm) {
								uni.reLaunch({
									url: `/pages/home/home?index=4`
								})
							}
						}
					})
				} else {
					uni.request({
						url: that.serverURL + "/index/Draw/saveUserPrize",
						method: "POST",
						data: {
							id: that.userinfo['id'],
							drawtype:that.drawtype
						},
						success(res) {
							if (res.data.code == 1) {
								let prizeId = res.data.prizeId;
								that.AwardList.map(function(item,index){
									if(item.id==prizeId){
										that.sjNum = index;
									}
								})
								if (index == 4) {
									that.noClick = false;
									that.FastNums = 0
									that.SlowNums = 0
									that.time = 200
									that.LoopStatus = true
									that.$emit('isDraw')
									that.loop()
								}
							} else {
								that.noClick = true;
								uni.showToast({
									title: res.data.msg,
									icon: "none",
									position: 'bottom'
								});
							}
						},
						fail(fail) {
							uni.hideLoading();
						}
					});
				}
			},
			// 抽奖过程 控制
			loop() {
				if (!this.sel || this.sel < 9) {
					if (this.sel == 3) {
						this.sel = 0
					} else if (this.sel === '') {
						this.sel = 0
					} else if (this.sel == 2) {
						this.sel = 5
					} else if (this.sel == 5) {
						this.sel = 8
					} else if (this.sel == 8) {
						this.sel = 7
					} else if (this.sel == 7) {
						this.sel = 6
					} else if (this.sel == 6) {
						this.sel = 3
					} else {
						this.sel++
					}
					this.FastNums++
					if (this.FastNums == 4) {
						this.FastNums = 0
						this.time = 50
						this.SlowNums++
					}
					if (this.SlowNums == 8) {
						this.SlowNums = 0
						this.time = 500
						this.FastNums = 5
					}
					if (this.FastNums > 5) {
						if (this.sel == this.sjNum) {
							this.noClick = true;
							this.LoopStatus = false
							// 成功的逻辑
							this.$emit('noDraw')
							this.updateMoney(this.sjNum)
						}
					}
					if (this.LoopStatus) {
						setTimeout(() => {
							this.loop()
						}, this.time);
					}
				}
			}
		}

	}
</script>

<style scoped>
	/* 抽奖 */
	.luck-list {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		margin: 0px auto;
		border-radius: 20rpx;
		padding: 20rpx 0px;
	}

	.cell-item {
		width: 182rpx;
		height: 183rpx;
		border-radius: 30rpx;
		margin: 14rpx;
	}

	.cell-content {
		width: 182rpx;
		height: 183rpx;
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.w {
		background-color: #fdf2ee;
	}

	.w-b {
		background-color: #f8d0c3;
	}

	.y {
		background-color: #00412d;
	}

	.y-b {
		background-color: #047449;
	}
</style>
